// pages/project/project.js
const db = wx.cloud.database();
Page({
  data: {
    tab: 'project', // 当前顶部tab选择，project-运动项目管理，sport-运动员管理
    type: 'add', // 当前弹窗状态，add-新增，mod-修改
    show: false, // 弹窗是否显示

    // 运动项目管理
    list: [], // 运动项目列表
    time: '09:00', // 运动项目表单的数据，存储时间
    date: '2022-05-30', // 存储日期
    project_name: '', // 存储项目名
    total: null, // 存储设定总参与人数 
   
    // 运动员管理
    sportList: [], // 运动员列表
    sex: '', // 运动员表单的数据，存储性别
    class: '', // 存储班级
    name: '', // 存储名字
    username: '', // 存储账户
    password: '' // 存储密码
  },
  choseTab(e) { // 选择当前tab
    this.setData({
      tab: e.target.dataset.index
    })
  },
  initList() { // 初始化-获取运动项目列表数据，存储到list中，用于展示
    db.collection('project').get({ // 数据从project表拿
      success: (res) => {
        this.setData({
          list: res.data || []
        })
      }
    })
  },
  initSportList() { // 初始化-获取运动员列表数据，存储到sportList中，用于展示
    db.collection('user').get({ // 运动员数据从user表拿，但是过滤admin管理员
      success: (res) => {
        const arr = res.data.filter(item => { // 过滤管理员，管理员不展示
          return item.username !== 'admin'
        })
        this.setData({
          sportList: arr || []
        })
      }
    })
  },
  add() { // 点击+号按钮，初始化表单数据，并展示弹窗。由于运动项目和运动员都是用同一个方法，所以需要进行类型区分
    if (this.data.tab === 'project') { // 如果是运动项目
      this.setData({ // 初始化表单数据，show：true实现弹窗展示，type：add标记当前弹窗类型为新增。
        time: '09:00',
        date: '2022-05-30',
        project_name: '',
        total: null,
        show: true,
        type: 'add'
      })
    } else {
      this.setData({
        sex: '',
        class: '',
        name: '',
        username: '',
        password: '',
        show: true,
        type: 'add'
      })
    }
  },
  close() { // 弹窗关闭
    this.setData({
      show: false
    })
  },
  mod(e){ // 修改
    const index = e.target.dataset.index; // 获取当前下标
    debugger;
    if (this.data.tab === 'project') { // 判断是运动项目还是运动员
      const item = this.data.list[index]; // 当前项
      this.setData({
        time: item.time,
        date: item.date,
        project_name: item.project_name,
        total: item.total,
        show: true,
        type: 'mod'
      })
    } else {
      const item = this.data.sportList[index];
      this.setData({
        name: item.name,
        sex: item.sex,
        class: item.class,
        password: item.password,
        show: true,
        type: 'mod'
      })
    }
   
    
  },
  del(e) { // 删除
    const index = e.target.dataset.index;
    if (this.data.tab === 'project') { 
      db.collection('project').where({ // where，类似于mysql的命令，执行查询
        'project_name': this.data.list[index].project_name
      }).remove({ // 执行remove方法进行删除
        success: (res) => { // 删除成功的回调
          console.log(res);
          this.initList()
        }
      })
    } else {
      db.collection('user').where({
        'username': this.data.sportList[index].username
      }).remove({
        success: (res) => {
          console.log(res);
          this.initSportList()
        }
      })
    }  
  },
  nameChange(e) {
    this.setData({
      name: e.detail.value
    })
  },
  sexChange(e) {
    this.setData({
      sex: e.detail.value
    })
  },
  classChange(e) {
    this.setData({
      class: e.detail.value
    })
  },
  totalChange(e) {
    this.setData({
      total: e.detail.value
    })
  },
  usernameChange(e) {
    this.setData({
      username: e.detail.value
    })
  },
  passwordChange(e) {
    this.setData({
      password: e.detail.value
    })
  },
  timeChange(e) {
    this.setData({
      time: e.detail.value
    })
  },
  dateChange(e) {
    this.setData({
      date: e.detail.value
    })
  },
  projectNameChange(e) {
    this.setData({
      project_name: e.detail.value
    })
  },
  submit() { // 弹窗的数据提交
    if (this.data.tab === 'project') {
      if (this.data.type === 'add') { // 判断弹窗状态是新增还是修改
        db.collection('project').add({
          data: {
            project_name: this.data.project_name,
            total: this.data.total,
            joiner: [],
            time: this.data.time,
            date: this.data.date
          },
          success: (res) => {
            console.log(res);
            this.setData({
              show: false
            })
            this.initList()
          }
        })
      } else { // 否则就是修改
        db.collection('project').where({ // 查表，然后精确查找到该条数据
          'project_name': this.data.project_name
        }).update({ // 通过update方法进行数据更新
          data: {
            project_name: this.data.project_name,
            total: this.data.total,
            time: this.data.time,
            date: this.data.data
          },
          success: (res) => { // 更新成功的回调
            this.setData({
              show: false
            })
            this.initList()
          }
        })
      }
    } else {
      if (this.data.type === 'add') {
        db.collection('user').add({
          data: {
            name: this.data.name,
            sex: this.data.sex,
            class: this.data.class,
            username: this.data.username,
            password: this.data.password
          },
          success: (res) => {
            this.setData({
              show: false
            })
            this.initSportList()
          }
        })
      } else {
        db.collection('user').where({
          'username': this.data.username
        }).update({
          data: {
            name: this.data.name,
            sex: this.data.sex,
            class: this.data.class,
            password: this.data.password
          },
          success: (res) => {
            this.setData({
              show: false
            })
            this.initSportList()
          }
        })
      }
    }
   
  },
  onLoad(options) { // 页面加载时执行
    this.initList();
    this.initSportList()
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  }
})